<template>
  <div style="position: relative; overflow: hidden; overflow-y: hidden">
    <div ref="wrap" class="wrap">
      <div ref="ScaleBox" class="ScaleBox">
        <div class="header">
          <div class="Home_title">
            {{ $t('productMonitoringDashboard') }}
          </div>
          <selectLanguage class="selectLanguage" />
        </div>
        <div class="bigScreen">
          <div style="padding: 0px 60px;">
            <div style="width: 160px;height: 60px;color: #FFFFFF;">
              <div style="display: flex; align-items: center; cursor: pointer;" @click="$router.push('/homeScreen')">
                <div class="switchIcon" />
                <div style="margin-left: 10px; font-size: 18px;">
                  {{ $t('HomeScreen') }}
                </div>
              </div>
            </div>
            <div class="timeFiltering">
              <div class="timeFilteringTitle">
                {{ $t('Time_filtering') }}
              </div>
              <div class="timeFilteringContent">
                <div class="timeFilteringContent_checkbox">
                  <el-checkbox
                    v-model="checkAll"
                    style="margin-right: 20px;"
                    :indeterminate="isIndeterminate"
                    @change="handleCheckAllChange"
                  >{{ $t('Select_All') }}</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" color="#FFFFFF" @change="handleCheckedCitiesChange">
                    <el-checkbox label="BOW">
                      BOW
                    </el-checkbox>
                    <el-checkbox label="camble">
                      camble
                    </el-checkbox>
                    <el-checkbox label="entireLength">
                      {{ $t('overall_length') }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div>
                  <el-date-picker
                    v-model="queryParams.date"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :placeholder="$t('SelectDate')"
                    @change="getInit"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="scatterBox" style="display: flex; align-items: center;">
            <div class="BOWScatter">
              <scatter ref="BOWScatter" :font-size="28" title="BOW" />
            </div>
            <div>
              <div class="cambleScatter">
                <scatter ref="cambleScatter" title="camble" />
              </div>
              <div class="overallLengthScatter">
                <scatter ref="overallLengthScatter" :title="$t('overall_length')" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scatter from './component/scatter.vue'
import { HistoryDataTrends } from '@/api/common'
import selectLanguage from '@/components/selectLanguage'
var roll, scrolltimer
export default {
  components: {
    scatter,
    selectLanguage
  },
  data() {
    return {
      scale: null,
      width: 1920,
      height: 1080,
      widthValue: 1920,
      heightValue: 1080,

      scrolltimer: null,
      timer: null,
      CMDTimer: null,

      checkAll: true,
      checkedCities: ['BOW', 'camble', 'entireLength'],
      isIndeterminate: false,
      value1: [],
      queryParams: {
        date: '',
        bow: true,
        camble: true,
        entireLength: true
      }
    }
  },
  mounted() {
    this.setScale()
    window.addEventListener('resize', this.setScale)
    this.getInit()
  },
  // 生命周期 - 创建完成
  created() {
  },
  beforeDestroy() {
  },

  destroyed() {
  },
  // 方法集合
  methods: {

    getInit() {
      HistoryDataTrends(this.queryParams).then((res) => {
        const { code, data } = res
        if (code == 1) {
          const BOWList = [],
            cambleList = [],
            entireLengthList = []
          data.bow.forEach((item) => {
            if (item.data && item.data.length > 0) {
              item.data.forEach((childItem) => {
                BOWList.push([Number(item.hour), Number(childItem)])
              })
            }
          })
          data.camble.forEach((item) => {
            if (item.data && item.data.length > 0) {
              item.data.forEach((childItem) => {
                cambleList.push([Number(item.hour), Number(childItem)])
              })
            }
          })
          data.entireLength.forEach((item) => {
            if (item.data && item.data.length > 0) {
              item.data.forEach((childItem) => {
                entireLengthList.push([Number(item.hour), Number(childItem)])
              })
            }
          })
          this.$refs.BOWScatter.init(BOWList, data.bow && data.bow[0] && data.bow[0].indicator || 0)
          this.$refs.cambleScatter.init(cambleList)
          this.$refs.overallLengthScatter.init(entireLengthList)
        }
      })
    },
    checkAllFn() {
      if (this.checkedCities.includes('BOW')) {
        this.queryParams.bow = true
      } else {
        this.queryParams.bow = false
      }
      if (this.checkedCities.includes('camble')) {
        this.queryParams.camble = true
      } else {
        this.queryParams.camble = false
      }
      if (this.checkedCities.includes('entireLength')) {
        this.queryParams.entireLength = true
      } else {
        this.queryParams.entireLength = false
      }
      this.getInit()
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? ['BOW', 'camble', 'entireLength'] : [];
      this.checkAll = val || [];
      this.isIndeterminate = false;
      this.checkAllFn()
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === 3;
      this.isIndeterminate = checkedCount > 0 && checkedCount < 3;
      this.checkAllFn()
    },
    getScale() {
      const { width, height } = this,
        ww = window.innerWidth / width,
        wh = window.innerHeight / height
      return ww < wh ? wh : ww
      // return ww
      // return ww < wh ? ww : wh;
    },
    getHeightScale() {
      const { width, height } = this,
        wh = window.innerHeight / height
      return wh
    },
    getWidthScale() {
      const { width, height } = this,
        ww = window.innerWidth / width
      return ww
    },
    setScale() {
      this.scale = this.getScale()
      const scale1 = this.getWidthScale(),
        scale2 = this.getHeightScale()
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty('--scale', scale1)
        this.$refs.ScaleBox.style.setProperty('--scale2', scale2)
      }
      if (this.$refs.wrap) {
        this.$refs.wrap.style.setProperty(
          '--heightValue',
          this.scale * this.heightValue + 'px'
          // this.scale * this.heightValue
        )
        this.$refs.wrap.style.setProperty(
          '--widthValue',
          this.scale * this.widthValue + 'px'
        )
      }
      // this.$refs.ScaleBox.style.setProperty("--scale", this.scale); //设置指定键值对系统属性
    }
  }
}
</script>

<style scoped>
.header {
  position: relative;
  width: 1920px;
  height: 100px;
  background-image: url('../../assets/imgs/u80.png');
  background-size: 100% 100%;
  text-align: center;
  font-size: 40px;
  color: #fff;
  line-height: 100px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

body::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
  overflow-y: hidden;
}

.wrap {
  width: var(--widthValue);
  height: var(--heightValue);
  background-color: #050d3a;
  background-size: 100% 100%;
  overflow: hidden;
  scrollbar-width: none;
}

#ScaleBox {
  --scale: 1;
}

.ScaleBox {
  width: 100%;
  height: 100%;
  transform: scale(var(--scale), var(--scale2));
  transform-origin: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
}

.flex {
  display: flex;
  justify-content: space-between;
  /* background-color: pink; */
}

.bigScreen {
  width: 1920px;
  height: 1000px;
  box-sizing: border-box;
  padding: 20px;
  /* display: flex; */
}

.switchIcon {
  width: 50px;
  height: 50px;
  background-image: url('../../assets/imgs/background.png');
  background-position: -130px 425px;
}

.statisticsBox {
  width: 400px;
  height: 180px;
  background-image: url('../../assets/imgs/background.png');
  background-position: -11021px 349px;
}

.statisticsTitle {
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
  padding: 26px 26px 0px 26px;
}

.statisticValue {
  font-weight: 700;
  font-style: normal;
  font-size: 48px;
  /* color: #D7D7D7; */
  text-align: right;
  padding-right: 60px;
}

.tableTitle {
  font-weight: 700;
  font-style: italic;
  font-size: 36px;
  color: #FFFFFF;
  padding-left: 40px;
}

td {
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  text-align: center;
}

/* .el-date-editor--daterange {
  background-color: #1e408a !important;
}

::v-deep .el-range-separator {
  color: #FFFFFF !important;
} */

::v-deep .el-date-editor .el-input__inner {
  background-color: #1e408a !important;
  border-color: #1e408a !important;
  color: #FFFFFF;
}

/* ::v-deep .el-range-input {
  background-color: #1e408a !important;
  color: #FFFFFF;
} */

.el-date-editor--daterange.el-input__inner {
  width: 420px !important;
}

.timeFiltering {
  width: 485px;
  height: 149px;
  background: inherit;
  background-color: rgba(30, 64, 138, 1);
  border: none;
  border-radius: 8px;
  margin-left: 60px;
}

.timeFilteringTitle {
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #D7D7D7;
  padding: 10px 0 10px 10px;
  border-bottom: 2px solid #FFFFFF;
}

.timeFilteringContent {
  padding: 10px 0 0 10px;
}

::v-deep .el-checkbox__label {
  color: #e2e6f0 !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #666ee8;
  border-color: #666ee8;
}

.timeFilteringContent_checkbox {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.scatterBox {
  padding: 20px 120px 0 120px;
}

.BOWScatter {
  width: 1060px;
  height: 650px;
  background-color: #1d418d;
  margin-right: 20px;
}

.cambleScatter {
  margin-bottom: 20px;
}

.cambleScatter,
.overallLengthScatter {
  width: 590px;
  height: 315px;
  background-color: #1d418d;
}
</style>
